<template>
  <div>
    <div class="columns">
      <div class="column is-one-fifth"></div>
      <div class="column is-three-fifths">
        <div style="margin:5% auto;width:400px;height:200px">
          <b-field label="点编号">
            <b-input v-model="pointId"></b-input>
          </b-field>
          <b-field label="知识产权所有人">
            <b-input v-model="uploader"></b-input>
          </b-field>
          <b-field label="知识来源">
            <b-input v-model="origin"></b-input>
          </b-field>
          <b-field label="文件创建者">
            <b-input v-model="creator"></b-input>
          </b-field>
          <b-field label="文件类型" type="is-success">
            <b-select placeholder="选择文件类型" v-model="type">
              <option value="0">PDF</option>
              <option value="1">Video</option>
            </b-select>
          </b-field>
          <b-field label="内容" type="is-success">
            <b-select placeholder="选择文件内容" v-model="content">
              <option value="原理">原理</option>
              <option value="实验">实验</option>
              <option value="题库">题库</option>
              <option value="问答">问答</option>
            </b-select>
          </b-field>
          <b-field label="难度" type="is-success">
            <b-select placeholder="选择文件难度" v-model="degree">
              <option value="初级">初级</option>
              <option value="中级">中级</option>
              <option value="高级">高级</option>
            </b-select>
          </b-field>
          <b-field label="标签" type="is-success">
            <b-select placeholder="选择文件标签" v-model="tag">
              <option value="案例介绍">案例介绍</option>
              <option value="名人趣事">名人趣事</option>
              <option value="最新进展">最新进展</option>
            </b-select>
          </b-field>
          <b-field class="file is-primary" :class="{ 'has-name': !!file }">
            <b-upload v-model="file" class="file-label">
              <span class="file-cta">
                <b-icon class="file-icon" icon="upload"></b-icon>
                <span class="file-label">上传文件</span>
              </span>
              <span class="file-name" v-if="file">
                {{ file.name }}
              </span>
            </b-upload>
          </b-field>
          <b-button @click="Upload()">点击上传</b-button>
        </div>
      </div>
      <div class="column is-one-fifth"></div>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "Upload",
  data() {
    return {
      file: null,
      pointId: "",
      type: "",
      uploader: "",
      content: "",
      degree: "",
      tag: "",
      origin: "",
      creator: "",
    };
  },
  methods: {
    async Upload() {
      // let data={
      //   pointId:this.pointId,
      //   type:this.type,
      //   uploader:this.uploader,
      //   file:this.file,
      //   content:this.content,
      //   tag:this.tag,
      //   origin:this.origin,
      //   creator:this.creator
      // }
      const data = new FormData();
      data.append("pointId", this.pointId);
      data.append("type", this.type);
      data.append("degree", this.degree)
      data.append("uploader", this.uploader);
      data.append("file", this.file);
      data.append("content", this.content);
      data.append("tag", this.tag);
      data.append("origin", this.origin);
      data.append("creator", this.creator);
      let res = await this.$http.post('api/2backcode/address/uploadFile', data)
      // let res = await this.$http.post(
      //   "api/2backcode/address/uploadFile",
      //   qs.stringify(data),
      //   config
      // );
      console.log(res.data);
    },
  },
};
</script>

<style></style>
